<template>
	<view class="bg-gray">
		<cu-custom :isBack="true">
			<block #content>
				操作日志
			</block>
		</cu-custom>
		
		<view style="position:fixed;top:160rpx;z-index:10000;width:100%;">
			<view class="flex justify-around align-center bg-white padding">
				<picker mode="date" :value="startDate" :end="formatDate(initEndTimestamp)" @change='startDateChange'>
					<view class="text-df" style="width: 100%;">{{startDate}}</view>
				</picker>
				<view class="text-df">{{$t('to')}}</view>
				<picker mode="date" :end="formatDate(initEndTimestamp)" @change='endDateChange'>
					<view class="text-df">{{endDate}}</view>
				</picker>
			</view>
		</view>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption"
			@up="getOperlogList" :top="'270rpx'" style="position:relative;z-index:1;width:100%;">
			<view v-for="(arrItem,arrIndex) in operlogList" :key="arrIndex" :style="(arrIndex == 0 ? style : '')">
				<view v-for="(item,index) in arrItem" :key="index" @tap="gotoOperlog(item)">
					<view class="bg-white light common-box text-sm margin padding">
						<view class="flex justify-between padding-bottom-sm"
							style="border-bottom:1px solid rgba(0, 0, 0, 0.1);">
							<view class="text-content">
								<text class="margin-right-sm">{{$t('status')}}:</text>
								<text>{{item.statusValue}}</text>
							</view>
							<view>
								<text class="margin-right-xs">编号:</text>
								<text>{{item.operId}}</text>
							</view>
						</view>
						<view class="margin-top-sm text-df">
							<text class="margin-right-xs ">系统模块:</text>
							<text class="text-gray">{{item.title}}</text>
						</view>
						<view class="margin-top-sm text-df">
							<text class="margin-right-xs ">操作类型:</text>
							<text :style="[{color:themeConfig.primaryColor}]">{{item.businessTypeValue}}</text>
						</view>
						<view class="margin-top-sm text-df">
							<text class="margin-right-xs ">请求方式:</text>
							<text class="text-gray">{{item.requestMethod}}</text>
						</view>
						<view class="margin-top-sm text-df">
							<text class="margin-right-xs">操作人员:</text>
							<text class="text-gray">{{item.operName}}</text>
						</view>
						<view class="margin-top-sm flex justify-between text-df">
							<view>
								<text class="margin-right-xs">操作地址:</text>
								<text class="text-gray">{{item.operIp}}</text>
							</view>
							<view>
								<text class="margin-right-xs">操作地点:</text>
								<text class="text-gray">{{item.operLocation}}</text>
							</view>
						</view>
						<view class="flex justify-between margin-top-sm">
							<view>
								<text>{{item.operTime}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		showToast,
		showLoading,
		hideLoading
	} from '@/util/toast'
	import {
		formatDateTime,
		formatDate
	} from '@/util/formatTime'
	import * as storage from '@/util/storage'
	import * as dataApi from '@/api/dmIot/dataApi.ts'
	import * as monitorApi from '@/api/dmIot/monitorApi.ts'
	import * as systemApi from '@/api/dmIot/systemApi.ts'
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins';
	export default {
		name:"operlog",
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data() {
			return {
				downOption: {
					use: true,
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: false,
					empty: {
						use: true,
						fixed: true,
						top: '20%'
					},
				},
				style: '',
				startDate: '',
				endDate: '',
				startTimestamp: '',
				endTimestamp: '',
				initEndTimestamp: '',
				initEndDate: '',
				operlogList: [],
				currentPage: 1,
				pageSize: 10,
				dicts: ['sys_oper_type', 'sys_common_status'],
				dictsList: []
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		onLoad(option) {
			this.initOption = option
			this.startDate = this.$t('all')
			this.endDate = this.$t('all')
		},
		onShow() {
			this.init()
		},
		methods: {
			formatDate(time) {
				return formatDate(time, this.$t('unKnow'))
			},
			formatDateTime(time) {
				return formatDateTime(time, this.$t('unKnow'))
			},
			gotoOperlog(item) {
				uni.navigateTo({
					url: `/pages/operlogInfo/operlogInfo?operId=${item.operId}`
				})
			},
			downCallback() {
				this.currentPage = 1
				this.operlogList = []
				this.mescroll.resetUpScroll()
			},
			init() {
				this.initDate()
			},
			initDate() {
				let time = new Date()
				this.startTimestamp = Math.round(time.getTime() / 1000 - 7 * 24 * 60 * 60).toString()
				this.endTimestamp = Math.round(time.getTime() / 1000 + 1 * 10).toString()
				this.startDate = formatDate(this.startTimestamp)
				this.endDate = formatDate(this.endTimestamp)
				this.initEndTimestamp = this.endTimestamp
				this.getDicts()
			},
			getDicts() {
				let dicts = this.dicts
				let dictsPro = []
				let dictsList = []
				for (var i = 0; i < dicts.length; i++) {
					let pro = new Promise((resolve, reject) => {
						systemApi.getDicts(dicts[i]).then((res) => {
							resolve(res)
						})
					})
					dictsPro.push(pro)
				}
				Promise.all(dictsPro).then(arr => {
					for (var i = 0; i < dicts.length; i++) {
						dictsList.push(arr[i].data)
					}
					this.dictsList = dictsList
				})
				this.getOperlogList()
			},
			getOperlogList() {
				let currentPage = this.currentPage
				let pageSize = this.pageSize
				let startTimestamp = this.startTimestamp
				let endTimestamp = this.endTimestamp
				let params = {
					startTime: formatDateTime(startTimestamp),
					endTime: formatDateTime(endTimestamp),
					pageNum: currentPage,
					pageSize
				}
				monitorApi.getOperlogList(params).then((res) => {
					const {
						rows,
						total,
						success
					} = res
					if (success) {
						this.mescroll.endByPage(rows.length, total)
						const index = currentPage - 1
						for (var i = 0; i < rows.length; i++) {
							let {
								businessType,
								status,
							} = rows[i]
							let dicts = this.dicts
							let dictsList = this.dictsList
							let businessTypeValue = dictsList[0].find((item) => {
								return item.dictValue == businessType
							})
							let statusValue = dictsList[1].find((item) => {
								return item.dictValue == status
							});
							rows[i]['businessTypeValue'] = businessTypeValue.dictLabel
							rows[i]['statusValue'] = statusValue.dictLabel
						}
						this.$set(this.operlogList, index, rows)
						this.currentPage = currentPage + 1
					}
				})
			},
			startDateChange(e) {
				const date = e.detail.value.replace(/-/g, '/');
				const timestamp = (new Date(date).getTime() / 1000).toString();
				const endTimestamp = this.endTimestamp
				if (endTimestamp < timestamp || endTimestamp == timestamp) {
					showToast(this.$t('lessEndDateTip'), 'none', 1000, false) //请选择小于结束日期
				} else {
					this.startTimestamp = timestamp
					this.startDate = e.detail.value
					this.currentPage = 1
					this.operlogList = []
					this.mescroll.scrollTo(0, 300)
					this.mescroll.resetUpScroll()
				}
			},
			endDateChange(e) {
				const date = e.detail.value.replace(/-/g, '/');
				const timestamp = (new Date(date).getTime() / 1000 + 1 * 24 * 60 * 60).toString();
				const startTimestamp = this.startTimestamp
				if (startTimestamp > timestamp || startTimestamp == timestamp) {
					showToast(this.$t('greaterStartDateTip'), 'none', 1000, false) //请选择大于开始日期
				} else {
					this.endTimestamp = timestamp
					this.endDate = e.detail.value
					this.currentPage = 1
					this.operlogList = []
					this.mescroll.scrollTo(0, 300)
					this.mescroll.resetUpScroll()
				}
			},
		},
		onShareAppMessage(res) {
			return {
				title: `中泰能`,
				path: `/pages/login/login`,
				success: (res) => {
					// console.log(res)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
	}
</style>
